<template>
	<view class="apply-content">

		<view class="">
			<view class="list-title">
				活动时间
			</view>

			<view class="hdsj">
				<view class="hdsj-item">
					报名时间：2023-12-25 09:52:16 - 2023-12-25 09:52:16
				</view>
				<view class="hdsj-item">
					活动时间：2023-12-25 09:52:16 - 2023-12-25 09:52:16
				</view>
			</view>
		</view>

		<view class="">
			<view class="list-title">
				报名信息
			</view>

			<view class="name item">
				<text style="color: rgba(0, 0, 0, 0.4);">姓名</text>
				<input class="item-input" placeholder="请输入姓名" v-model="userinfo.name" @click="nameChange" />
			</view>

			<view class="name item">
				<text style="color: rgba(0, 0, 0, 0.4);">性别</text>
				<view class="">
					<radio-group @change="radioChange" class="radio-group">
						<label class="weui-cell weui-check__label" v-for="item in items" key="index">
							<view class="weui-cell__hd">
								<radio :value="item.value" color="#000" class="sex"
									:checked="userinfo.gender == item.value" />
							</view>
							<view class="weui-cell__bd">{{item.name}}</view>
						</label>
					</radio-group>
				</view>

			</view>

			<view class="name item">
				<text style="color: rgba(0, 0, 0, 0.4);">手机</text>
				<input class="item-input" placeholder="请输入手机号" v-model="userinfo.mobile" @click="mobileChange" />
			</view>

			<view class="name item">
				<text style="color: rgba(0, 0, 0, 0.4);">地址</text>
				<input class="item-input" placeholder="请输入地址" v-model="userinfo.address"  @click="addressChange" />
			</view>
		</view>

		<button class="apply-btn" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					signup_start: "2023-12-25 09:52:16",
					signup_end: "2023-12-26 09:52:16",
					launch_start: "2023-12-26 09:52:16",
					launch_end: "2023-12-20 09:52:16",
					name: "",
					gender: "1",
					mobile: "",
					address: ""
				},
				items: [{
					value: '1',
					name: '男'
				}, {
					value: '0',
					name: '女'
				}]

			}
		},
		methods: {
			async submit() {
				let _this = this;
				let params = _this.userinfo;
				let res = await this.$api.cyclingSignup(params);
			},

			// 性别切换
			radioChange(e) {
				this.userinfo.gender = e.detail.value
			},
			nameChange(e) {
				this.userinfo.name = e.detail.value
			},
			mobileChange(e) {
				this.userinfo.mobile = e.detail.value
			},
			addressChange(e) {
				this.userinfo.address = e.detail.value
			},
		}
	}
</script>

<style>
	.apply-content {
		padding: 30rpx;
		font-size: 26rpx;
	}

	.apply-btn {
		background-color: #111;
		color: white;
		width: calc(100% - 56rpx);
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.list-title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 60rpx;
	}

	.item {
		width: calc(100% - 40rpx);
		height: 84rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;

	}

	.item-input {
		text-align: right;
	}

	.hdsj {
		background-color: white;
		border-radius: 5rpx;
		font-size: 22rpx;
	}

	.hdsj-item {
		line-height: 50rpx;
		padding: 0 10rpx;
	}

	.weui-cell {
		display: flex;
	}

	.radio-group {
		display: flex;
	}

	.sex {
		transform: scale(0.7);
	}
</style>